<template>
  <div>
    <!-- 头部组件 -->
    <NavBar :arrowBool="false"></NavBar>
    <!-- 轮播图组件 -->
    <Swiper :value="lunboList" class="home-swipe"></Swiper>

    <!-- 宫格系统 -->
    <van-grid :column-num="3">
      <van-grid-item to="/newslist">
        <img src="../assets/images/menu1.png" alt />
        <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item to="/photo/list">
        <img src="../assets/images/menu2.png" alt />
        <p>图片分享</p>
      </van-grid-item>
      <van-grid-item to="/goods/list">
        <img src="../assets/images/menu3.png" alt />
        <p>商品购买</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu4.png" alt />
        <p>留言反馈</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu5.png" alt />
        <p>视频专区</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu6.png" alt />
        <p>联系我们</p>
      </van-grid-item>
    </van-grid>
    <!-- 底部tab栏  -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import Swiper from "../components/lunbotu";
import NavBar from '../components/navBar'
import TabBar from '../components/Tabbar'
export default {
  components: {
    Swiper,
    NavBar,
    TabBar
  },
  data() {
    return {
      //保存轮播图数据的数组
      lunboList: []
    };
  },
  methods: {
    async getSwipe() {
      //发送请求，得到轮播图数据
      const { data: res } = await this.$http.get("api/getlunbo");

      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取轮播图数据失败，请联系管理员");
      }

      this.lunboList = res.message;
    }
  },
  created() {
    this.getSwipe();
  }
};
</script>

<style lang="less" scoped>
.home-swipe {
  height: 150px;
  img {
    width: 100%;
    height: 100%;
  }
}

.van-grid-item {
  img {
    width: 60px;
  }
}
</style>

